React Suspense i Error Boundaries: Zaawansowana obsługa ładowania i błędów

React Suspense i Error Boundaries to potężne funkcje, które pozwalają deweloperom tworzyć bardziej odporne i przyjazne dla użytkownika aplikacje. Zapewniają one deklaratywny sposób obsługi stanów ładowania i nieoczekiwanych błędów, poprawiając ogólne doświadczenie użytkownika i upraszczając proces tworzenia oprogramowania. Ten artykuł stanowi kompleksowy przewodnik po efektywnym wykorzystaniu React Suspense i Error Boundaries, omawiając wszystko od podstawowych koncepcji po zaawansowane techniki.

Zrozumienie React Suspense

React Suspense to mechanizm "zawieszania" renderowania komponentu do momentu spełnienia określonego warunku, zazwyczaj dostępności danych z operacji asynchronicznej. Pozwala to na wyświetlanie interfejsu zapasowego (fallback UI), takiego jak wskaźniki ładowania, podczas oczekiwania na załadowanie danych. Suspense upraszcza zarządzanie stanami ładowania, eliminując potrzebę ręcznego renderowania warunkowego i poprawiając czytelność kodu.

Kluczowe koncepcje Suspense

• Granice Suspense (Suspense Boundaries): Są to komponenty React, które opakowują komponenty, które mogą ulec zawieszeniu. Definiują one interfejs zapasowy (fallback UI) do wyświetlenia, gdy opakowane komponenty są zawieszone.
• Interfejs zapasowy (Fallback UI): Interfejs, który jest wyświetlany podczas zawieszenia komponentu. Zazwyczaj jest to wskaźnik ładowania lub placeholder.
• Asynchroniczne pobieranie danych: Suspense bezproblemowo współpracuje z asynchronicznymi bibliotekami do pobierania danych, takimi jak `fetch`, `axios` czy niestandardowymi rozwiązaniami.
• Dzielenie kodu (Code Splitting): Suspense może być również używany do opóźniania ładowania modułów kodu, co umożliwia dzielenie kodu i poprawia wydajność początkowego ładowania strony.

Podstawowa implementacja Suspense

Oto prosty przykład użycia Suspense do wyświetlania wskaźnika ładowania podczas pobierania danych:

import React, { Suspense } from 'react';

// Symuluje pobieranie danych (np. z API)
const fetchData = () => {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve({ name: 'John Doe', age: 30 });
    }, 2000);
  });
};

// Tworzy zasób, którego może użyć Suspense
const createResource = (promise) => {
  let status = 'pending';
  let result;
  let suspender = promise().then(
    (r) => {
      status = 'success';
      result = r;
    },
    (e) => {
      status = 'error';
      result = e;
    }
  );

  return {
    read() {
      if (status === 'pending') {
        throw suspender;
      } else if (status === 'error') {
        throw result;
      }

      return result;
    },
  };
};

const userData = createResource(fetchData);

// Komponent, który odczytuje dane z zasobu
const UserProfile = () => {
  const data = userData.read();
  return (
    

      
Name: {data.name}
      
Age: {data.age}
    
  );
};

const App = () => {
  return (
    Ładowanie danych użytkownika...